<template>
  <div class="fx1-box">
    <ul class="ul">
      <li v-for="(msg, i) in arr" :key="i" @click="fun(i)">
        <img :src="msg.imgSrc" />
        <p>{{ msg.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          imgSrc:
            "https://res.vmallres.com/uomcdn/CN/cms/202204/FF23052C8A4A77EE6D62E5DDEA3D3710.png.50.webp",
          title: "运动健康",
        },
        {
          imgSrc:
            "https://res.vmallres.com/uomcdn/CN/cms/202204/551F7B51142AE1359C09E88903583855.png.50.webp",
          title: "教育办公",
        },
        {
          imgSrc:
            "https://res.vmallres.com/uomcdn/CN/cms/202204/44E2CE62F246EC7774C0C791430614F9.png.50.webp",
          title: "智能家居",
        },
        {
          imgSrc:
            "https://res.vmallres.com/uomcdn/CN/cms/202204/D0E884DCA97F5B391840F57EA3B78A24.png.50.webp",
          title: "影音娱乐",
        },
        {
          imgSrc:
            "https://res.vmallres.com/uomcdn/CN/cms/202204/6FC9C260C2CDB21F36027A6079D47566.png.50.webp",
          title: "智慧出行",
        },
      ],
    };
  },
  methods: {
    fun(idx) {
      if (idx == 0) {
        this.$router.push("yundong", idx);
      }
    },
  },
};
</script>

<style scoped>
.fx1-box {
  width: 100%;
  height: 0.75rem;
}
.fx1-box .ul {
  display: flex;
  justify-content: space-evenly;
}
.fx1-box .ul li {
  text-align: center;
  width: 0.6rem;
  margin-top: 0.1rem;
  height: 100%;
}
.fx1-box .ul li img {
  width: 0.4rem;
  height: 0.4rem;
}
.fx1-box .ul li p {
  font-size: 0.12rem;
}
</style>